<template>
  <!-- <div class="wrap-container"> -->
  <div class="split-pane">
    <splitpane :splitSet="settingLR">
      <!-- #paneL 表示指定该组件为左侧面板 -->
      <template #paneL>
        <!-- 自定义左侧面板的内容 -->
        <el-card shadow="hover">
          <div class="dv-a">
            <VxeTableTree
              ref="leftTreeRef"
              :query-form="queryForm"
              :tree-height="treeHeight"
              :url="url"
              @get-expand-row-keys="getExpandRowKeys"
              @tree-node-click="onNodeClick"
            />
          </div>
        </el-card>
      </template>
      <!-- #paneR 表示指定该组件为右侧面板 -->
      <template #paneR>
        <el-card shadow="hover">
          <div class="dv-b">
            <slot name="main">这是内容</slot>
          </div>
        </el-card>
      </template>
    </splitpane>
  </div>
  <!-- </div> -->
</template>

<script>
import VxeTableTree from "@/plugins/VabTree/VxeTableTree.vue";
import { backTableHeight, getClientHeight } from "@/api/mains";
import splitpane from "@/components/ReSplitPane";

export default {
  name: "CommonTreeMain",
  components: { VxeTableTree, splitpane },
  props: {
    url: {
      type: String,
      default: () => {
        return "";
      }
    },
    queryForm: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  emits: {
    "handle-node-click": null, //fetchData事件没有检验
    "callback-tree-expand-rows": Array
  },
  setup(props, { emit }) {
    const state = reactive({
      isShow: false,
      disabled: true,
      editable: false,
      formRef: null,
      leftTreeRef: null,
      labelPosition: "right",
      id: "", //树节点的id
      parentid: "", //父节点id
      label: "", //树节点的文本
      url: "",
      form: {},
      treeHeight: ""
    });

    state.treeHeight = `${backTableHeight() + 60}px`;

    state.url = ref(props.url);

    const handleRefreshTree = async treeNodeId => {
      state["leftTreeRef"].handleRefresh();
      onNodeClick(treeNodeId);
    };

    const onNodeClick = treeNodeId => {
      if (treeNodeId) {
        emit("handle-node-click", treeNodeId);
      }
    };

    const getExpandRowKeys = expandRowKeys => {
      emit("callback-tree-expand-rows", expandRowKeys);
    };

    const settingLR = reactive({
      minPercent: 10,
      defaultPercent: 25,
      split: "vertical"
    });

    const pageHeight = getClientHeight() - 150 + "px";

    return {
      ...toRefs(state),
      pageHeight,
      onNodeClick,
      getExpandRowKeys,
      handleRefreshTree,
      settingLR
    };
  }
};
</script>

<style lang="scss" scoped>
:deep() {
  .el-button--mini {
    padding: 7px 5%;
  }
  .el-icon-caret-right::before {
    display: none;
  }
  .el-card {
    height: 100%;
    margin-bottom: 0 !important;
    .el-card__body {
      height: 100%;
      padding: 10px;
    }
  }
}

$W: 100%;
$H: v-bind(pageHeight);
.split-pane {
  width: 85vw;
  height: $H;
}
</style>
